$(function() {

    load();

    // 按下回车保存数据
    $('#add').on('click',function(){
        if($("#title").val()!=''){
            // 读取本地数据
            var local= getData();
            // 追加新数据
            local.push({
                title : $("#title").val(),
                done : false
            });
            // 保存
            saveData(local);
            // 读取
            load();
            $("#title").val('');
            }
        });
    $("#title").on("keydown", function(event){

        if($(this).val()!=''){

            // 如果按了回车键
            if (event.keyCode === 13){
                // 读取本地数据
                var local= getData();
                // 追加新数据
                local.push({
                    title : $(this).val(),
                    done : false
                });
                // 保存
                saveData(local);
                // 读取
                load();

                $(this).val('');
            }
        }
    });

    // 勾选和取消
    $('ol,ul').on('click','input',function(){
        var data= getData();
        var index = $(this).siblings('a').attr('id');
        data[index].done = $(this).prop('checked');
        saveData(data);
        load();
    });

    // 读取本地存储的数据
    function getData(){
        var data = localStorage.getItem('ToDoList');
        if(data!==null){
            // 返回本地存储的对象
            return JSON.parse(data);
        }else{
            return [];
        }
    }

    // 保存数据
    function saveData(data){
        localStorage.setItem('ToDoList',JSON.stringify(data));
    }

    // 删除数据
    $('ol,ul').on('click','a',function(){
        var data= getData();
        var index = $(this).attr('id');

        // 删除b元素  splice(从哪个位置开始删除, 删除几个元素)
        data.splice(index,1);
        saveData(data);
        load();
    });

    // 加载本地数据
    function load(){
        var ToDoCount = 0;
        var DoneCount = 0;
        // 获取数据之前清空ol的数据
        $('ol,ul').empty();
        var data = getData();
        $.each(data,function(index,wd){
            if(wd.done){
                DoneCount++;
                $('ul').prepend('<li><input type="checkbox" checked="checked"><p>'+wd.title+'</p><a href="javascript:;" id="'+index+'"></a></li>');
            }else{
                $('ol').prepend('<li><input type="checkbox"><p>'+wd.title+'</p><a href="javascript:;" id="'+index+'"></a></li>');
                ToDoCount++;
            }
        });
       
        $('#ToDoCount').text(ToDoCount);
        $('#DoneCount').text(DoneCount);
    }
    
    


})